/**
 * Created by JLB1 on 2017/2/7.
 */

import React, { Component } from 'react';
import ReactDOM from 'react-dom';
import AJAX from '../../lib/ajax';
import Tools from '../../lib/tools';
import Toast from '../MyPackage/components/Toast';

require('../../styles/common.less');
require('../../styles/lux.less');
require('../../styles/resetWeui.less');
require('./ConfirmCabinet.less');

class ConfirmCabinet extends Component {
    constructor(props) {
        super(props);
        this.state = {
            order_id: Tools.getParams().order_id,
            listType: Tools.getParams().listType,
            unPickUpCount: Tools.getParams().new_unpick_count,
            old_cabinet_code: Tools.getParams().cabinet_code,
            cabinet_code: '',
        };
    }

    componentDidMount() {
        this.scanCabinet();
    }

    handleInputCabinet = e => {
        const cabinet_code = e.target.value.replace(/[^\d]/g, '').trim();

        this.setState({ cabinet_code });
    }

    handleConfirm = () => {
        const { listType, cabinet_code, old_cabinet_code } = this.state;

        if (!cabinet_code) {
            Toast.warn({ content: '柜体编号不能为空' });
            return;
        }

        if (old_cabinet_code != cabinet_code) {
            Toast.warn({ content: '柜体无效，请重新输入' });
            return;
        }
        if (listType === 'new_unpick') {
            this.getCharge();
        }
        else {
            this.isNeedPay();
        }
    }

    // 老系统判断是否需要支付
    isNeedPay = () => {
        const {order_id} = this.state;

        AJAX.request('need_pay', { order_id }, data => {
            if (data.code === 0) {
                window.location.href = `./OpenBoxFinal?order_id=${order_id}`
            } else {
                window.location.href = `./PickUpDetailOne?order_id=${order_id}`;
            }
        });
    }

    // 新系统判断是否需要支付
    getCharge = () => {
        const { order_id, unPickUpCount } = this.state;

        AJAX.request('getCharge', { orderId: order_id }, data => {
            if (data.code === 0 && data.body.amount === 0) {
                window.location.href = `./OpenBoxNewFinal?order_id=${order_id}`
            } else {
                window.location.href = `./NewPickUpDetail?order_id=${order_id}&count=${unPickUpCount}&order_type=3&isCheck=true`;
            }
        });
    }

    scanCabinet = () => {
        AJAX.request('get_signature', {
            full_url: window.location.href
        }, (data) => {
            wx.config({
                debug: false, // 开启调试模式,调用的所有api的返回值会在客户端alert出来，若要查看传入的参数，可以在pc端打开，参数信息会通过log打出，仅在pc端时才会打印。
                appId: data.body.appid, // 必填，公众号的唯一标识
                timestamp: data.body.timestamp, // 必填，生成签名的时间戳
                nonceStr: data.body.noncestr, // 必填，生成签名的随机串
                signature: data.body.signature,// 必填，签名，见附录1
                jsApiList: ['scanQRCode'] // 必填，需要使用的JS接口列表，所有JS接口列表见附录2
            })
            wx.ready(() => {
                wx.scanQRCode({
                    needResult: 1, // 默认为0，扫描结果由微信处理，1则直接返回扫描结果，
                    scanType: ["barCode", "qrCode"], // 可以指定扫二维码还是一维码，默认二者都有
                    success: res => {
                        var cabinet_code = null, result = res.resultStr; // 当needResult 为 1 时，扫码返回的结果
                        if (result.split(",").length > 1) {
                            //扫描的是条形码
                            cabinet_code = result.split(",")[1];
                        } else {
                            //扫描的是二维码
                            cabinet_code = result;
                        }
                        this.setState({ cabinet_code: cabinet_code }, () => {
                            this.handleConfirm();
                        });
                    }
                });
            })
        })
    }

    render() {
        const { cabinet_code } = this.state;

        return (
            <div>
                <div className="lux-pt10 lux-pl10 lux-pr10 lux-pb10">
                    <div className="top-box lux-d-f lux-ai-c">
                        <img src="https://wechat.jinlb.cn/assets/images/icon-cabinet.png" alt="" />
                        <div>检测到您的当前位置距离柜体较远需验证当前柜体是否为取件柜体！</div>
                    </div>

                    <div className="content-box">
                        <div className="title">请输入柜体编号</div>

                        <div className="input-box">
                            <input value={cabinet_code} onChange={this.handleInputCabinet} />

                            <img
                                src="https://wechat.jinlb.cn/assets/images/icon-scan.png"
                                onClick={this.scanCabinet}
                            />
                        </div>

                        <div className="tip">小贴士：柜体屏幕下方条形码对应的数字就是柜体编号哦</div>
                    </div>
                </div>

                <div className="footer-box">
                    <div className="footer-btn-box">
                        <button
                            className="footer-btn"
                            onClick={this.handleConfirm}
                        >
                            确定
                        </button>
                    </div>
                </div>
            </div>
        );
    }
}

ReactDOM.render(<ConfirmCabinet />, document.getElementById('app'));

if (module.hot) {
    module.hot.accept();
}